<template>
<div>
  <el-row>
    <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-for="o in newsArray" :key="o.uniquekey">
      <el-card :body-style="{ padding: '0px'}" style="margin-top:15px;" shadow="hover">
        <img
         :src="o.thumbnail_pic_s"
          class="image"
        />
        <div style="padding: 14px">
          <span>{{o.title}}</span>
          <div class="bottom clearfix">
            <time class="time">{{ o.date }}</time>
            <el-button type="text" @click="enter(o.url)" class="button">查看</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>
<style>
body {
  padding-left: 50px;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>

<script>
import Api from '../utill/Api.config.js'
export default {
  props: {
    newstype: String,
  },
  data() {
    return {
      currentDate: new Date(),
      newsArray:[]

    };
  },
  watch: {
      newstype:{
          handler:'getnews',
          immediate:true
      }
  },
  methods:{
      getnews(){
          this.axios.get(Api.News.getnews(this.newstype)).then((response)=>{
                console.log(response);
                this.newsArray = response.data.result.data;
          });
      },
      enter(url){
         window.location.href = url;
      }
  }
};
</script>